<template>
  <maskLayer v-model="visible" center append-to-body>
    <div class="content">
      <div class="title">
        <span>评价</span>
        <img @click="closeLayer" src="../../../assets/login/9.png" alt="" />
      </div>
      <div class="evaluate_content">
        <div class="evaluate_score">
          <span>评价</span>
          <el-rate
            :disabled="false"
            v-model="value1"
            size="small"
            :max="5"
            :clearable="true"
            void-color="#E6E6E6"
          />
        </div>
        <div class="title_text">评价内容</div>
        <div class="evaluate_textarea">
          <el-input
            v-model="content"
            placeholder="请输入您的评价"
            placeholder-style="color:#999;font-size:7px;"
            maxlength="200"
            type="textarea"
            resize="none"
          />
        </div>
        <div class="title_text">
          <span>添加照片</span>
          <span class="title_tip">最多可上传9张</span>
        </div>
        <div class="upload">
          <div class="upload_img" v-for="(item, index) in imgList" :key="index">
            <el-image :src="item" alt="" fit="cover" />
            <img
              @click="delImg(index)"
              class="del_img"
              src="../../../assets/my/32.png"
              alt=""
            />
          </div>
          <div class="upload_img">
            <!-- <upload
              ref="uploadText"
              class="upload_view"
              :limit="9"
              @getfile="filelistData"
            >
            </upload> -->
            <input
              class="upload_input"
              type="file"
              accept="image/png, image/jpeg, image/jpg"
              @change="handleFiles"
              multiple
            />
            <img src="../../../assets/my/24.png" alt="" />
          </div>
        </div>
        <div class="anonymous" @click="selectAnonymous">
          <img v-if="is_anonymous" src="../../../assets/default/1.png" alt="" />
          <img v-else src="../../../assets/default/2.png" alt="" />
          <span>匿名评价</span>
        </div>
        <div class="save_btn" @click="submit">
          <span>提交</span>
        </div>
      </div>
    </div>
  </maskLayer>
</template>


<script name="evaluate" setup>
import { post65e845c2b0b2e, post662092c66ee3c } from "@/utils/api.js";
import { ref, inject } from "vue";
import maskLayer from "@/components/maskLayer.vue";
import upload from "@/components/upload.vue";
import axios from "axios";
const injectMessage = inject("$message");

const props = defineProps({
  course_id: {
    type: String,
    default: "",
  },
});

let is_anonymous = ref(true);
function selectAnonymous() {
  is_anonymous.value = !is_anonymous.value;
}

// let imgList = ref([]);
// function filelistData(list) {
//   console.log(list);
//   imgList.value = list;
// }

// 上传文件
let imgList = ref([]);
function handleFiles(e) {
  if(e.target.files.length + imgList.value.length > 9) {
    injectMessage.error('最多只能上传9张图片');
    return;
  }
  // 获取配置信息
  post662092c66ee3c({}).then((res) => {
    if (res.data) {
      for (let i = 0; i < e.target.files.length; i++) {
        // 执行上传
        let file = e.target.files[i];
        let filename = file.name;
        let fileSize = file.size; // b
        let ossData = res.data;
        let formData = new FormData();
        let key = ossData.dir + filename;
        let config = {
          headers: { "Content-Type": "multipart/form-data" },
        };
        // 判断上传的视频是否超过500M
        if (fileSize > 5 * 1024 * 1024) {
          injectMessage.error("图片大小不得超过5M");
          return false;
        }
        // let random = Math.floor(Math.random() * 900) + 100;  // 生成随机数
        formData.append("OSSAccessKeyId", ossData.accessKeyId);
        formData.append("policy", ossData.policy);
        formData.append("signature", ossData.signature);
        formData.append("Filename", filename);
        formData.append("key", ossData.dir +  filename);
        formData.append("success_action_status", "200");
        formData.append("file", file);

        axios.post(ossData.host, formData, config).then((res) => {
          if (res.status == 200) {
            imgList.value.push(ossData.host + "/" + ossData.dir + filename);
            // console.log(imgList.value);
            // that.coverImg = ossData.host + '/' + ossData.dir + filename + '?x-oss-process=video/snapshot,t_1000,m_fast,f_jpg';
            // that.videoUrl = ossData.host + '/' + ossData.dir + filename;
          }
        });
      }
    } else {
      injectMessage.error("获取上传配置信息失败");
    }
  });
}
function delImg(index) {
  imgList.value.splice(index, 1);
}

let visible = ref(false);

function openLayer() {
  visible.value = true;
}
function closeLayer() {
  visible.value = false;
}

let value1 = ref(5);
let content = ref("");
function submit() {
  if (!content.value) {
    injectMessage.error("请输入评价内容");
    return;
  }
  visible.value = false;
  post65e845c2b0b2e({
    freecourselist_id: props.course_id,
    pingjianeirong: content.value,
    xingji: value1.value,
    shifouniming: is_anonymous.value ? 1 : 0,
    pingjiatu: imgList.value.join(","),
  })
    .then((res) => {
      if (res.code == 1) {
        injectMessage.success("评价成功");
        emits("confirm");
      }
    })
    .catch((err) => {
      console.log(err);
    });
}

const emits = defineEmits(["confirm"]);

defineExpose({
  openLayer,
});
</script>

<style lang="scss" scoped>
.content {
  width: 400px;
  height: 330px;
  background: #fff;
  .title {
    width: 100%;
    height: 28px;
    background: #1f52ae;
    color: #fff;
    font-size: 9px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px 0 16px;
    img {
      width: 10px;
      height: 10px;
      cursor: pointer;
    }
  }
  .evaluate_content {
    padding: 16px 12px;
    .evaluate_score {
      display: flex;
      align-items: center;
      span {
        font-size: 8px;
        font-weight: bold;
        margin-right: 10px;
      }
    }
    .title_text {
      margin-top: 12px;
      font-size: 8px;
      font-weight: bold;
      span {
        font-weight: bold;
      }
      .title_tip {
        font-size: 7px;
        color: #999;
        margin-left: 8px;
      }
    }
    .evaluate_textarea {
      width: 100%;
      height: 84px;
      background: #f6f7f9;
      border-radius: 2px;
      font-size: 7px;
      margin-top: 8px;
    }
    .upload {
      margin-top: 9px;
      overflow: hidden;
      .upload_img {
        float: left;
        width: 40px;
        height: 40px;
        margin-top: 12px;
        cursor: pointer;
        margin: 0 5px 5px 0;
        position: relative;
        .upload_input {
          width: 100%;
          height: 100%;
          position: absolute;
          left: 0;
          top: 0;
          opacity: 0;
          cursor: pointer;
        }
        .el-image {
          width: 100% !important;
          height: 100% !important;
          border-radius: 2px;
        }
      }
      .upload_view {
        position: relative;
        z-index: 2;
        width: 100% !important;
        height: 100% !important;
      }
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .del_img {
        width: 8px;
        height: 8px;
        position: absolute;
        top: 3px;
        right: 3px;
      }
    }
    .upload_text {
      font-size: 6px;
      color: #999;
      margin-top: 6px;
    }
    .anonymous {
      display: flex;
      align-items: center;
      font-size: 7px;
      color: #666;
      cursor: pointer;
      img {
        width: 7px;
        height: 7px;
        margin-right: 3px;
      }
    }
    .save_btn {
      width: 120px;
      height: 24px;
      background: #1f52ae;
      font-size: 8px;
      color: #fff;
      border-radius: 3px;
      margin: 24px auto 0;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }
  }
}
</style>
